<template>
  <div class="router" :style="`margin-left: ${leftOnShow.onShow}px`">
    <el-collapse v-model="activeNames">
      <el-collapse-item
        v-for="(items, index) in navList"
        :key="index"
        :title="items.title"
        :name="index + 1"
      >
        <div class="flex">
          <div
            v-for="(item, ind) in items.comList"
            :key="ind"
            class="navIcon"
            draggable="true"
            :data-name="item.name"
            @dragstart="drag($event)"
            @dragend="dragends($event)"
          >
            <div class="el-div">
              <i :class="'iconfont ' + item.icon" />
              <p>{{ item.text }}</p>
            </div>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
    <div class="left-close" @click="closeLeft">
      <i :class="`el-icon-arrow-${leftOnShow.site}`" />
    </div>
  </div>
</template>

<script>
import { router } from './navList.js'
export default {
  name: 'Router',
  props: {
    pointer: Object
  },
  data() {
    return {
      // 左侧关闭相关
      leftOnShow: {
        onShow: 0,
        site: 'left'
      },
      activeNames: [1] /* 侧边栏组件显示 */,
      navList: router
    }
  },
  methods: {
    // 当用户开始拖动元素或选择文本时触发此事件
    drag(event) {
      /* 开启穿透 */
      this.pointer.show = true
      // 111
      /* 传递参数 */
      event.dataTransfer.setData('componentName', event.target.dataset.name)
    },

    // 当拖动操作结束时（释放鼠标按钮或按下退出键），会触发此事件
    dragends(even) {
      /* 关闭穿透 */
      this.pointer.show = false
      this.$emit('dragends', even)
    },
    closeLeft() {
      const l = this.leftOnShow.onShow
      if (l === 0) {
        this.leftOnShow.onShow = -200
        this.leftOnShow.site = 'right'
      } else {
        this.leftOnShow.onShow = 0
        this.leftOnShow.site = 'left'
      }
      this.$emit('closeLeft', l)
    }
  }
}
</script>

<style scoped lang="scss">
/* 组件 */
.router {
  width: 200px;
  height: 100%;
  position: relative;
  border-right: 1px solid #ebedf0;
  box-sizing: border-box;
  padding: 0 12px;
  background: #fff;
  transition: all 0.3s;
  ::v-deep .el-collapse-item__header {
    border-bottom: 0 !important;
    font-size: 17px;
    font-weight: 600;
    color: #323233;
  }
  ::v-deep .el-collapse-item__wrap {
    border-bottom: 0 !important;
    position: relative;
    height: 100vh;
    .el-collapse-item__content {
      overflow-y: auto;
      position: absolute;
      width: 100%;
      height: 100%;
      /* 滚动条 */
      &::-webkit-scrollbar {
        width: 1px;
      }
      &::-webkit-scrollbar-thumb {
        background-color: #155bd4;
      }
    }
  }
  .flex {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 120px;
  }
  /* 组件列表 */
  .navIcon {
    position: relative;
    width: 39%;
    cursor: all-scroll;
    transition: all 0.3s;
    background: #f5f8fb;
    margin: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 0;
    .el-div {
      width: 100%;
    }
    &:hover {
      background: #0080ff;
      i,
      p,
      span {
        color: #fff;
      }
    }
    /* 图标 */
    i {
      font-size: 22px;
      color: #001529;
      overflow: hidden;
      width: 100%;
      margin: 0 !important;
      text-align: center;
      padding: 0 !important;
      display: block;
    }
    /* 标题 */
    p {
      font-size: 14px;
      color: #001529;
      padding: 0 !important;
      margin: 0 !important;
      text-align: center;
      height: 20px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: normal;
      width: 100%;
      position: relative;
      top: -6px;
      //font-family: 华文行楷;
    }
  }
  // 关闭左侧
  .left-close {
    width: 31px;
    position: absolute;
    top: 28%;
    right: -15%;
    z-index: 10;
    display: flex;
    align-items: center;
    font-size: 20px;
    //background: url('../../../../assets/kscj-sq-l.png')no-repeat center;
    background: url("../../assets/kscj-sq-l.png") no-repeat center;
    background-size: cover;
    height: 95px;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s;
  }
}
</style>
